<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px" v-if="searchItem">
      <el-form-item label="名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @clear="getDataList"/>
      </el-form-item>
      <el-form-item label="维修人员" prop="maintainerId">
        <el-select v-model="queryParams.maintainerId" placeholder="请选择维修人员" clearable @clear="getDataList">
          <el-option v-for="item in maintainerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="维修人员电话" prop="mobile">
        <el-input v-model="queryParams.mobile" placeholder="请输入维修人员电话" clearable @clear="getDataList"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @clear="getDataList">
          <el-option label="正常" value="1"></el-option>
          <el-option label="维修中" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getDataList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="editBtn">
        <el-button type="success" :disabled="single" plain icon="el-icon-edit" size="mini" @click="addOrUpdateHandle()" v-hasPermi="['smartCabinet:smartCabinet:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5" v-if="delectBtn">
        <el-button type="danger" :disabled="multiple" plain icon="el-icon-delete" size="mini" @click="deleteHandle" v-hasPermi="['smartCabinet:smartCabinet:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5" v-if="exportBtn">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="exportHandle" v-hasPermi="['smartCabinet:smartCabinet:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5" v-if="mapShowBtn">
        <el-button type="primary" icon="el-icon-s-promotion" size="mini" @click="mapHandle">地图分布</el-button>
      </el-col>
      <el-col :span="1.5" v-if="updataBan">
        <el-button type="primary" :disabled="multiple" icon="el-icon-upload" size="mini" @click="updateCabinet">更新信息</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :border="listBorder" :data="dataList" @selection-change="dataListSelectionChangeHandle">
      <el-table-column type="selection" width="55" align="center" v-if="type == 'indexList'" />
      <el-table-column label="ID" width="120" align="center" prop="id">
        <template slot-scope="scope">
          <div class="table_status_text">
            <com-status :className="scope.row.client"></com-status>
            {{ scope.row.id }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="编号" width="160" align="center" prop="seriesNo" />
      <el-table-column label="名称" width="260" align="center" prop="name" />
      <el-table-column label="柜组编号" width="100" align="center" prop="cabinetGroupNo" />
      <el-table-column width="120" label="维修人员" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.maintainerVo ?  scope.row.maintainerVo.name : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column width="120" label="维修人员电话" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.maintainerVo ?  scope.row.maintainerVo.mobile : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column width="260" label="所在城市" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.regionVo ?  scope.row.regionVo.area.mergename : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" label="所在区域" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.regionVo ?  scope.row.regionVo.details : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址" width="400" align="center" prop="address" />
      <el-table-column width="100" label="状态" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 1 ?  '正常' : '维修中'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="版本号" width="100" align="center" prop="version" />
      <el-table-column width="160" label="更新失败信息" header-align="center" align="center">
        <template slot-scope="scope">
          <!-- <span class="updateErrorMsg">{{ scope.row.updateErrorMsg}}</span> -->
          <el-tooltip effect="dark" placement="bottom">
            <div slot="content">{{scope.row.updateErrorMsg}}</div>
            <div class="updateErrorMsg">{{scope.row.updateErrorMsg}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="160" align="center" prop="createtime" />
      <el-table-column label="更新时间" width="160" align="center" prop="updatetime" />
      <el-table-column fixed="right" width="260" label="操作" align="center" class-name="small-padding fixed-width" v-if="type == 'indexList'">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-menu" @click="statusHandle(scope.row)">存放状态</el-button>
          <el-button size="mini" type="text" icon="el-icon-scissors" @click="maintenanceHandle(scope.row)">维修</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)" v-hasPermi="['smartCabinet:smartCabinet:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)" v-hasPermi="['smartCabinet:smartCabinet:remove']">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150" v-if="chooseTable">
        <template slot-scope="scope">
          <el-button size="small" @click="toggleSelectHandle(scope.row)" :style="actionStyle(scope.row)">
            {{actionText(scope.row)}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :current-page.sync="pageNum" :page.sync="pageNum" :limit.sync="pageSize" @pagination="query" />

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <!-- 弹窗, 地图分布 -->
    <map-distribution v-if="mapshow" :dataList="dataList" ref="mapDistribution"></map-distribution>
    <!-- 弹窗, 柜子存放状态 -->
    <status-dialog v-if="statusDialogShow" ref="statusDialog"></status-dialog>
    <!-- 维修弹窗 -->
    <el-dialog title="维修" class="common_dialog" :visible.sync="maintenanceShow" append-to-body>
      <el-form :model="form" ref="form">
        <el-form-item label="请选择维修人员" prop="maintainerId">
          <el-select v-model="form.maintainerId" placeholder="请选择维修人员" clearable>
            <el-option v-for="item in formMaintainerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="maintenanceShow = false">取 消</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="formSubmitHandle()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './cabinet/index-add-or-update'  //新增修改的状态弹窗
import MapDistribution from './cabinet/map-distribution'  //弹窗, 地图分布
import StatusDialog from './cabinet/status-dialog'  //智能柜每个柜子的状态弹窗
import comStatus from "@/components/com-status";  //智能柜状态
import { getMaintainerList, getSelecttAllMaintainerList } from "@/api/basic/maintainer/maintainer";
import { updateSmartCabinet, updateCabinet } from "@/api/smartCabinet/smartCabinet";
export default {
  name: "SmartCabinet",
  mixins: [mixinViewModule],
  //  type                              使用列表的状态 indexList为后面有操作权限
  //  searchItem                        是否显示查询板块
  //  listBorder                        table是否展示边框
  //  chooseTable                       table是否可以选中
  //  editBtn                           是否显示修改按钮
  //  delectBtn                         是否显示删除按钮
  //  exportBtn                         是否显示导出按钮
  //  mapShowBtn                        是否显示地图分布按钮
  //  updataBan                         是否显示更新信息按钮
  //  qPCabinetGroupNo                  queryParams传柜组编号cabinetGroupNo   
  //  qPNotInGroupNo                    queryParams传非柜组编号notInGroupNo
  //  regionId                          queryParams传区域id regionId 
  //  notInRegionId                     queryParams传非区域id notInRegionId 
  props: {
    type: {
      type: String,
      default: ''
    },
    searchItem: {
      type: Boolean,
      default: false
    },
    listBorder: {
      type: Boolean,
      default: false
    },
    chooseTable: {
      type: Boolean,
      default: false
    },
    editBtn: {
      type: Boolean,
      default: false
    },
    delectBtn: {
      type: Boolean,
      default: false
    },
    exportBtn: {
      type: Boolean,
      default: false
    },
    mapShowBtn: {
      type: Boolean,
      default: false
    },
    updataBan: {
      type: Boolean,
      default: false
    },
    qPCabinetGroupNo: {
      type: String,
      default: ''
    },
    qPNotInGroupNo: {
      type: String,
      default: ''
    },
    regionId: {
      type: [String,Number],
      default: ''
    },
    notInRegionId: {
      type: [String,Number],
      default: ''
    },

  },
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/smartCabinet/list',
        getDataListIsPage: true,
        deleteURL: '/smartCabinet/remove',
        exportURL: '/smartCabinet/export',
        deleteIsBatch: true
      },
      // 查询参数
      queryParams: {
        name: '',
        maintainerId: '',
        mobile: '',
        status: '',
        cabinetGroupNo: this.qPCabinetGroupNo,
        notInGroupNo: this.qPNotInGroupNo,
        regionId: this.regionId,
        notInRegionId: this.notInRegionId,
      },
      mapshow: false, //地图分布弹窗的显示
      // 维修表单参数
      form: {
        maintainerVo: ''
      },
      maintenanceShow: false, // 维修弹窗的展示
      maintainerList: [], //维修人员列表工作中
      formMaintainerList: [], //维修框内下拉维修人员
      confirmLoading: false,
      statusDialogShow: false,//柜子存放状态的弹窗显示
      value: [], //如果table可以选中，选中的值
    };
  },
  components: {
    AddOrUpdate, //新增修改的状态弹窗
    MapDistribution, //弹窗, 地图分布
    comStatus, //智能柜状态
    StatusDialog, //智能柜每个柜子的状态弹窗
  },
  created() {
    this.getmaintainerList()
    this.getFormMaintainerList()
    this.autoRefreshDataList()
  },
  methods: {
    // 查看存放状态
    statusHandle(row) {
      this.statusDialogShow = true
      this.$nextTick(() => {
        this.$refs.statusDialog.init()
        this.$refs.statusDialog.seriesNo = row.seriesNo
      })
    },
    getFormMaintainerList() {
      getSelecttAllMaintainerList().then(response => {
        this.formMaintainerList = response.data;
      });
    },
    // 获取维修人员列表工作中
    getmaintainerList() {
      getMaintainerList(1).then(response => {
        this.maintainerList = response.data;
      });
    },
    // 点击地图分布
    mapHandle() {
      this.mapshow = true
      this.$nextTick(() => {
        this.$refs.mapDistribution.init()
      })
    },
    // 点击维修
    maintenanceHandle(row) {
      this.maintenanceShow = true
      this.form = row
    },
    updateCabinet() {
      if (this.dataListSelections.length === 0) {
        this.$message('请选择需要更新的智能柜')
        return
      }
      let seriesNos = [];
      this.dataListSelections.map(item => {
        seriesNos.push(item.seriesNo)
      })
      updateCabinet(seriesNos).then(response => {
        this.$modal.msgSuccess("推送成功");
        this.maintenanceShow = false
        this.confirmLoading = false
        this.getDataList()
      }).catch(() => {
        this.confirmLoading = false
      })
    },
    autoRefreshDataList() {
      // 设置一个每2000毫秒执行一次的定时器
      // let that = this
      // setInterval(function() {
      //     that.getDataList()
      // }, 2000)
    },
    actionStyle(row) {
      let color = "#666";
      if (this.value) {

        if (this.value instanceof Array) {
          this.value.forEach(item => {
            if (item.id == row.id) {
              color = "#409EFF";
            }
          });
        }
        else {
          if (this.value.id == row.id) {
            color = "#409EFF";
          }
        }
      }
      return {
        color
      }
    },
    actionText(row) {
      let text = "未选择";

      if (this.value) {
        if (this.value instanceof Array) {
          this.value.forEach(item => {
            if (item.id == row.id) {
              text = "已选择";
            }
          });
        }
        else {
          if (this.value.id == row.id) {
            text = "已选择";
          }
        }
      }
      return text
    },
    toggleSelectHandle(row) {
      if (this.value instanceof Array) {
        const index = this.value.findIndex((r) => r.id === row.id);
        if (index > -1) {
          this.value.splice(index, 1);
        } else {
          this.value.push({ ...row });
        }
      } else {
        if (row.id === this.value?.id) {
          this.value = {};
        } else {
          this.value = { ...row };
        }
      }
    },
    formSubmitHandle: debounce(function () {
      this.form.status = this.form.maintainerId ? 2 : 1
      this.form.maintainflag = true
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.confirmLoading = true
          updateSmartCabinet(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.maintenanceShow = false
            this.confirmLoading = false
            this.getDataList()
          }).catch(() => {
            this.confirmLoading = false
          });
        }
      })
    }, 1000, { 'leading': true, 'trailing': false }),
  }
};
</script>
<style lang="scss" scoped>
.table_status_text {
  display: flex;
  justify-content: center;
}
.updateErrorMsg {
  width: 160px;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>